<template>
  <el-carousel
    :autoplay="false"
    type="card"
    arrow="never"
    ref="carousel"
    height="120px"
    @change="$emit('changeActive', $event)"
  >
    <el-carousel-item v-for="item in imageList" :key="item.id">
      <img :src="item.url" style="width: 100%" />
    </el-carousel-item>
  </el-carousel>
</template>

<script setup>
import { onMounted, getCurrentInstance, ref, reactive } from "vue";
const { imageList } = defineProps({
  imageList: {
    type: Object,
    default: {},
    watch: (val, newVal) => {
      console.log(val, newVal);
    },
    deep: true,
  },
});
import { slideBanner } from "../utils/swipeMouse.js";
const comp = getCurrentInstance();
defineEmits(["changeActive"]);

onMounted(() => {
  slideBanner(comp);
});
</script>
<style scoped>
.el-carousel {
  width: 80vw;
}
</style>
